<template>
   <div>
      <div class="box">
          <div class="silder">
            <ul>
              <li v-for="(item,index) in types" :key="index">
                <span @click="selectFirstMenu(index)">{{item.name}}</span>
              </li>
            </ul>
          </div>
          <div class="main">
             <ul>
              <li v-for="(item,index) in secondList" :key="index">
                 <span @click="selectSecondMenu(index)">{{item.name}}</span>
              </li>
             </ul>
             <div v-html="content"></div>
          </div>
      </div>
   </div>
</template>

<script>
/*
  作业的思路
  1、在data选项中定义数据
*/
export default {
  data(){
    return{
      types:[
        {
          name:'旅游',
          children:[
            {
              name:'特卖汇',
              content:`<div>
                <div>
                  <span>目的地</span>
                  <input placeholder="三亚">
                </div>
              </div>`
            },
            {
              name:'处境旅游',
              content:`<h2>出境旅游</h2>`
            },
            {
              name:'国内旅游'
            }
          ]
        },
        {
          name:'酒店',
          children:[
            {
              name:'国内酒店'
            },
            {
              name:'国外酒店'
            },
            {
              name:'酒店团购'
            }
          ]
        },
        {
          name:'机票'
        },
        {
          name:'门票'
        },
        {
          name:'攻略'
        }
      ],
      secondList:[],
      content:''
    }
  },
  methods:{
    selectFirstMenu(index){
      //这么赋值的原因是
      this.secondList=this.types[index].children
    },
    selectSecondMenu(index){
      this.content=this.secondList[index].content
    }
  }
}
</script>

<style lang="scss">
  li{
    list-style: none;
    line-height: 50px;
  }
  .box{
    display: flex;
    width: 555px;
    height: 333px;
    background-color: yellow;
    .silder{
       width: 85px;
       height: 100%;
       background-color: red;
    }
    .main{
      flex-grow: 1;
      height: 100%;
      background-color:springgreen;
      ul{
        display: flex;
        justify-content: space-around;
      }
    }
  }
</style>